<!--  -->
<template>
	<div class="cbox" ref="cbox" id="cbox" style="width: 800px; height: 100vh">
		<div
			@click="clickmap"
			style="width: 100%; height: 100%; background: #fff"
			id="myMap"></div>
		<div class="leftDiv">
			<div
				class="dept"
				v-for="item in letDiv"
				style="left: 5px"
				v-drawL
				:data-lineId="`${item.name}_line`"
				:data-cid="`${item.name}_circle`">
				{{ item.name }}
			</div>
		</div>
		<div class="rightDiv">
			<div
				class="dept"
				v-for="item in rightDiv"
				style="left: 5px"
				v-drawR
				:data-lineId="`${item.name}_line`"
				:data-cid="`${item.name}_circle`">
				{{ item.name }}
			</div>
		</div>
		<div
			class="circle"
			v-for="item in dataList"
			:id="`${item.name}_circle`"
			:style="{
				left: setC(item.value[0], item.value[2]),
				top: setC(item.value[1], item.value[2]),
			}"></div>
	</div>
</template>

<script>
// import * as echarts from 'echarts';
import vueEcharts from "echarts";
import shanxiJson from "@/assets/json/shanxi.json";
vueEcharts.registerMap("shanxi", shanxiJson);
vueEcharts.registerMap("mapOutline", shanxiJson);
export default {
	name: "map",
	data() {
		return {
			zoom: 1.1,
			leftpx: "center",
			toppx: "middle",
			dataList: [],
			letDiv: [],
			rightDiv: [],
			myChart: {},
			baseWidth: 10,
		};
	},
	directives: {
		drawL: {
			inserted: function (el, binding, vnode) {
				const vm = vnode.context;
				vm.drawLine(
					el,
					document.getElementById(el.getAttribute("data-cid")),
					1
				);
			},
		},
		drawR: {
			inserted: function (el, binding, vnode) {
				const vm = vnode.context;
				vm.drawLine(
					el,
					document.getElementById(el.getAttribute("data-cid")),
					2
				);
			},
		},
	},
	mounted() {
		this.chinaConfigure("shanxi", this.zoom);
		this.getList();
		this.drawRect();
	},
	methods: {
		chinaConfigure(name, zoom) {
			let leftpx = this.leftpx;
			let toppx = this.toppx;
			this.myChart = vueEcharts.init(document.getElementById("myMap")); //这里是为了获得容器所在位置
			let left = this;
			left.$nextTick(function () {
				setTimeout(function () {
					left.myChart.resize();
				}, 500);
			});
			window.addEventListener("resize", function () {
				setTimeout(function () {
					left.myChart.resize();
				}, 500);
			});
			left.myChart.setOption({
				// 进行相关配置
				backgroundColor: "",
				geo: [
					{
						// 这个是重点配置区
						z: 1,
						map: name, // 根据名字显示中国地图，省或市地图，
						label: {
							normal: {
								show: true, // 是否显示对应地名
								textStyle: {
									color: "#3F6FC7",
									fontSize: 16,
								},
							},
						},
						zoom: zoom, //默认缩放大小
						center: "", // 调整地图位置
						left: leftpx,
						top: toppx,
						roam: false, //开启鼠标缩放
						itemStyle: {
							normal: {
								//静态下样式
								areaColor: "#EDF2FE", // 背景
								borderWidth: "1", // 边框宽度
								borderColor: "#3F6FC7", // 边框颜色
							},
							emphasis: {
								//鼠标移入样式
								borderColor: "",
								borderWidth: 0,
								areaColor: "#3F6FC7",
								shadowOffsetX: 0,
								shadowOffsetY: 0,
								shadowBlur: 20,
								shadowColor: "#C2C6DE",
							},
						},
					},
					{
						// 外轮廓线1  阴影1
						z: -5,
						left: leftpx,
						top: toppx,
						map: name, // 根据名字显示中国地图，省或市地图，
						label: {
							normal: {
								show: true, // 是否显示对应地名
								textStyle: {
									color: "#3F6FC7",
									fontSize: 16,
								},
							},
						},
						zoom: zoom, //默认缩放大小
						center: "", // 调整地图位置
						roam: false, //开启鼠标缩放
						itemStyle: {
							normal: {
								//静态下样式
								borderWidth: "4", // 边框宽度
								borderColor: "#3F6FC7", // 边框颜色
								shadowOffsetX: 12,
								shadowOffsetY: 10,
								shadowBlur: 1,
								shadowColor: "#99B4E1",
							},
						},
					},
					{
						// 阴影2
						z: -8,
						map: name, // 根据名字显示中国地图，省或市地图，
						left: leftpx,
						top: toppx,
						label: {
							normal: {
								show: true, // 是否显示对应地名
								textStyle: {
									color: "#3F6FC7",
									fontSize: 16,
								},
							},
						},
						zoom: zoom, //默认缩放大小
						center: "", // 调整地图位置
						roam: false, //开启鼠标缩放
						itemStyle: {
							normal: {
								//静态下样式
								borderWidth: "4", // 边框宽度
								borderColor: "#D8E3F3", // 边框颜色
								shadowOffsetX: 25,
								shadowOffsetY: 15,
								shadowBlur: 1,
								shadowColor: "#D8E3F3",
							},
						},
					},
				],
			});
		},
		getList() {
			this.dataList = [
				{
					name: "111",
					value: [49.25, 46.00484261501211, 919],
				},
				{
					name: "222",
					value: [70.625, 10.588235294117647, 919],
				},
				{
					name: "333",
					value: [67.375, 20.106951871657753, 919],
				},
				{
					name: "444",
					value: [55.75, 19.78609625668449, 919],
				},
				{
					name: "555",
					value: [43.125, 25.56149732620321, 919],
				},
				{
					name: "666",
					value: [51.75, 34.54545454545455, 919],
				},
				{
					name: "777",
					value: [39, 34.01069518716578, 919],
				},
				{
					name: "888",
					value: [62.25, 34.224598930481285, 919],
				},
				{
					name: "999",
					value: [34.25, 54.6524064171123, 919],
				},
				{
					name: "1010",
					value: [39.375, 51.12299465240642, 919],
				},
				{
					name: "1111",
					value: [59.375, 57.54010695187166, 919],
				},
				{
					name: "1212",
					value: [34.75, 62.56684491978609, 919],
				},
				{
					name: "1313",
					value: [41.87500000000001, 74.75935828877006, 919],
				},
				{
					name: "1414",
					value: [54.625, 77.43315508021391, 919],
				},
				{
					name: "1515",
					value: [31.375, 80.64171122994652, 919],
				},
				{
					name: "1616",
					value: [29.875, 72.0855614973262, 919],
				},
				{
					name: "1717",
					value: [63, 45.13368983957219, 919],
				},
				{
					name: "1818",
					value: [62.5, 26.631016042780747, 919],
				},
				{
					name: "1919",
					value: [43.5, 27.486631016042782, 919],
				},
				{
					name: "2020",
					value: [38.75, 35.721925133689844, 919],
				},
				{
					name: "2121",
					value: [62.625, 45.24064171122995, 919],
				},
				{
					name: "2222",
					value: [59.875, 59.786096256684495, 919],
				},
				{
					name: "2323",
					value: [47, 57.967914438502675, 919],
				},
				{
					name: "2424",
					value: [53.5, 66.63101604278074, 919],
				},
				{
					name: "2626",
					value: [36.25, 84.1711229946524, 919],
				},
				{
					name: "2727",
					value: [37.875, 67.70053475935829, 919],
				},
				{
					name: "2828",
					value: [34.375, 42.780748663101605, 919],
				},
				{
					name: "2929",
					value: [43.99999999999999, 46.31016042780749, 919],
				},
				{
					name: "3030",
					value: [64.75, 51.87165775401069, 919],
				},
				{
					name: "3131",
					value: [57.5, 31.76470588235294, 919],
				},
			];
		},
		drawRect() {
			let data = this.dataList;
			let letDiv = [];
			let rightDiv = [];
			for (let i = 0; i < data.length; i++) {
				if (data[i].value[0] > 50) {
					rightDiv.push(data[i]);
				} else {
					letDiv.push(data[i]);
				}
			}
			rightDiv.sort((a, b) => {
				return a.value[1] - b.value[1];
			});
			letDiv.sort((a, b) => {
				return a.value[1] - b.value[1];
			});
			this.rightDiv = rightDiv;
			this.letDiv = letDiv;
		},
		setC(data, h, i) {
			let p =
				document.getElementById("myMap").getBoundingClientRect()
					.height / h;
			if (data > 50) {
				return `calc(${data - p}% - 5px)`;
			} else {
				return `calc(${data + p}% - 5px)`;
			}
		},
		clickmap(e) {
			this.$nextTick(() => {
				let cwidth = document.getElementById("cbox").clientWidth;
				let cHeight = document.getElementById("cbox").clientHeight;
				let left = 100 / (cwidth / e.x);
				let top = 100 / (cHeight / e.y);
				console.log(
					JSON.stringify([
						left,
						top,
						document.getElementById("myMap").getBoundingClientRect()
							.height,
					])
				);
			});
		},
		drawLine(el1, el2, i, t) {
			let obj1 = el1;
			let obj2 = el2;
			let color = "#409EFF";
			let leftPx = document
				.getElementById("cbox")
				.getBoundingClientRect().left;
			let topPx = document
				.getElementById("cbox")
				.getBoundingClientRect().top;
			// 起点坐标
			if (i == 1) {
				//左侧
				var x1 =
					obj1.getBoundingClientRect().right +
					this.baseWidth -
					leftPx;
				var y1 =
					obj1.getBoundingClientRect().top +
					obj1.clientHeight / 2 -
					topPx;
			} else {
				//右侧
				var x1 =
					obj1.getBoundingClientRect().left - this.baseWidth - leftPx;
				var y1 =
					obj1.getBoundingClientRect().top +
					obj1.clientHeight / 2 -
					topPx;
			}
			// 终点坐标
			var x2 =
				obj2.getBoundingClientRect().left + obj2.clientWidth - leftPx;
			var y2 =
				obj2.getBoundingClientRect().top + obj2.clientHeight - topPx;

			// 计算连接线长度
			var length = Math.sqrt(
				(x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)
			);

			// 计算连接线旋转弧度值
			var rad = Math.atan2(y2 - y1, x2 - x1);
			// 连接线未旋转前，起点坐标计算
			var top = (y1 + y2) / 2;
			var left = (x1 + x2) / 2 - length / 2;

			// console.log(rad)
			// 创建连接线 dom 节点，并设置样式
			var line = document.createElement("div");
			var style =
				"position: absolute; background-color: " +
				color +
				"; height: 2px; top:" +
				top +
				"px; left:" +
				left +
				"px; width: " +
				length +
				"px; transform: rotate(" +
				rad +
				"rad);";
			line.setAttribute("style", style);
			line.setAttribute("id", obj1.getAttribute("data-lineId"));
			if (t) {
				line.setAttribute("data-has", "1");
			}
			document.getElementById("cbox").appendChild(line);
			if (line.getAttribute("data-has") != "1") {
				const _this = this;
				this.$nextTick(() => {
					setTimeout(() => {
						_this.drawLine2(el1, line, i, true, rad);
					}, 500);
				});
			}
		},
		drawLine2(el1, el2, i, t, rad) {
			let obj1 = el1;
			let obj2 = el2;
			let color = "#409EFF";
			let leftPx = document
				.getElementById("cbox")
				.getBoundingClientRect().left;
			let topPx = document
				.getElementById("cbox")
				.getBoundingClientRect().top;
			// 起点坐标
			if (i == 1) {
				//左侧
				var x1 = obj1.getBoundingClientRect().right - leftPx;
				var y1 =
					obj1.getBoundingClientRect().top +
					obj1.clientHeight / 2 -
					topPx;
			} else {
				//右侧
				var x1 = obj1.getBoundingClientRect().left - leftPx;
				var y1 =
					obj1.getBoundingClientRect().top +
					obj1.clientHeight / 2 -
					topPx;
			}
			// 终点坐标
			if (i == 1) {
				if (rad > 0) {
					var x2 = obj2.getBoundingClientRect().left - leftPx;
					var y2 = obj2.getBoundingClientRect().top - topPx;
				} else {
					var x2 = obj2.getBoundingClientRect().left - leftPx;
					var y2 = obj2.getBoundingClientRect().bottom - 4 - topPx;
				}
			} else {
				if (rad > 0) {
					var x2 = obj2.getBoundingClientRect().right - leftPx;
					var y2 = obj2.getBoundingClientRect().top - topPx;
				} else {
					var x2 = obj2.getBoundingClientRect().right - leftPx;
					var y2 = obj2.getBoundingClientRect().bottom - 2 - topPx;
				}
			}

			// 计算连接线长度
			var length =
				Math.sqrt((x2 - x1) * (x2 - x1) + (y2 - y1) * (y2 - y1)) + 2;

			// 计算连接线旋转弧度值
			var rads = Math.atan2(y2 - y1, x2 - x1);
			// 连接线未旋转前，起点坐标计算
			var top = (y1 + y2) / 2;
			var left = (x1 + x2) / 2 - length / 2;

			// 创建连接线 dom 节点，并设置样式
			var line = document.createElement("div");
			var style =
				"position: absolute; background-color: " +
				color +
				"; height: 2px; top:" +
				top +
				"px; left:" +
				left +
				"px; width: " +
				length +
				"px; transform: rotate(" +
				0 +
				"rad);";
			line.setAttribute("style", style);
			line.setAttribute("id", obj1.getAttribute("data-lineId"));
			if (t) {
				line.setAttribute("data-has", "1");
			}
			document.getElementById("cbox").appendChild(line);
		},
	},
};
</script>

<style lang="less" scoped>
.cbox {
	position: relative;
	left: 200px;
	top: 100px;
	.circle {
		position: absolute;
		width: 10px;
		height: 10px;
		border-radius: 50%;
		background-color: #409eff;
		border: 3px solid #fff;
		z-index: 99999;
	}
}
.leftDiv,
.rightDiv {
	display: flex;
	flex-direction: column;
	position: absolute;
	left: 0;
	top: 0;
	width: 30%;
	height: 100%;
	background-color: transparent;
	justify-content: space-around;
	align-items: center;
}
.rightDiv {
	left: unset;
	right: 0 !important;
}
.dept {
	width: 42%;
	height: 5%;
	//border: 2px solid #409EFF;
	//background-color: #fff;
	//   background-image: url('../assets/img/blue.png');
	background-size: 100% 100%;
	font-size: 12px;
	color: #409eff;
	border-radius: 4px;
	display: flex;
	justify-content: center;
	align-items: center;
}
.lineItem {
	position: relative;
	z-index: 999;
	border-color: red;
}
</style>
